<style>
    .layui-nav {
        background-color: transparent;
    }

    .layui-nav .layui-nav-item {
        margin-left: 5px;
    }

    .logoDiv {
        transform: translateY(50%);
        font-size: 18px;
        color: #f0f0f0;
        /*width: 24%;*/
    }

    .logoDivInside {
        transform: translateX(44%);
    }

    .website-tabs-wrap {
        margin-top: 10px;
    }

    .layui-logo {
        width: 100%;
    }

    .layui-logo img {
        width: 32px;
        margin-bottom: 4px;
        margin-right: 3px;
        display: inline-block;
        vertical-align: middle
    }

    .logoDivInside {
        float: left;
        margin-left: 6%;
    }
</style>
<div class="layui-layout client-website-layout" id="client-website-layout">
    <div class="layui-header layui-anim website-anim-down layui-row" id="client-header">
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 logoDiv">
            <div class="layui-logo">
                <div class="logoDivInside">
                    <img data-th-src="@{website/images/logo.png}">
                    <span>中国法学会课题管理系统</span>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
            <ul class="layui-nav" id="top-btn-group" style="float: right">
                <li class="layui-nav-item">
                    <button class="layui-btn layui-btn-sm" id="noticeBtn">通知公告
                    </button>
                </li>
                <li class="layui-nav-item">
                    <button class="layui-btn layui-btn-sm" id="messageBtn">
                        <i class="layui-icon ">&#xe667;</i>
                        查看消息 <span class="layui-badge-dot" id="messageSpan"></span>
                    </button>
                </li>
                <li class="layui-nav-item layui-hide-xs">
                    <button class="layui-btn layui-btn-radius layui-btn-sm" id="loginBtn">
                        <i class="layui-icon">&#xe66f;</i>登录
                    </button>
                </li>
                <li class="layui-nav-item layui-hide-xs">
                    <a class="layui-btn layui-btn-radius layui-btn-sm layui-nav-child-href" data-th-href="@{logout}"
                       id="loginOut">
                        <i class="layui-icon layui-icon-logout" style="color: #f0f0f0"></i>退出
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <div class="website-tabs-hidden layui-row">
        <script type="text/html" id="TPL-app-tabsmenu" template>
            {{# if(layui.conf.viewTabs){ }}
            <div class="website-tabs-wrap">
                  <span class="website-tabs-btn website-tabs-action website-tabs-prev" data-type="prev">
                      <i class="layui-icon layui-icon-left"></i>
                  </span>
                <span class="website-tabs-btn website-tabs-action website-tabs-next" data-type="next">
                    <i class="layui-icon layui-icon-right"></i>
                  </span>
                <span class="website-tabs-btn website-tabs-action website-tabs-down" data-type="down">
                      <i class="layui-icon layui-icon-close"></i>
                  </span>
                <ul class="website-tabs-menu" id="website-tabs-menu">
                    {{# layui.each(layui.view.tab.data,function(i, item){ }}
                    <li data-type="page" class="website-tabs-btn" lay-url="{{item.fileurl}}"
                        lay-filter="{{item.fileurl}}">
                        <i class="website-tabs-ball"></i>{{ item.title }}<b
                            class="layui-icon layui-icon-close website-tabs-close"></b>
                    </li>
                    {{# }) }}
                </ul>
            </div>
            {{# } }}
        </script>
    </div>

    <!-- 主体内容 -->
    <div class="layui-body client-website-body" id="client-website-body"></div>
    <script data-th-inline="javascript" type="text/javascript">

        function wsPath() {
            let pathName = window.document.location.pathname;
            let host = window.location.host;
            let projectName = pathName.substring(0,
                pathName.substr(1).indexOf('/') + 1);
            return (host + projectName);
        }

        layui.use(['jquery', 'website', 'element'], function () {
            let $ = layui.jquery,
                website = layui.website,
                $view = $('#client-website-layout'),
                $messageBtn = $('#messageBtn'),
                $messageSpan = $('#messageSpan'),
                $noticeBtn = $('#noticeBtn'),
                loginOut = $view.find('#loginOut'),
                websock = new WebSocket('ws://' + wsPath() + '/webSocket/message/' + currentUser.userId),
                loginBtn = $view.find('#loginBtn');

            if (!currentUser) {
                loginOut.hide()
                $noticeBtn.hide()
                loginBtn.show()

            } else {
                loginOut.show()
                $noticeBtn.show()
                loginBtn.hide()
            }

            $messageBtn.on('click', function () {
                website.modal.open('查看消息', 'client/userMessage', {
                    btn: ['关闭'],
                    area: $(window).width() <= 750 ? '95%' : '50%',
                    offset: '30px',
                    yes: function (index, layer) {
                        layui.layer.closeAll();
                    }
                });
            })
            $noticeBtn.on('click', function () {
                window.open(ctx + 'front/index') ;
            })
            websock.onopen = function () {
                //当WebSocket创建成功时，触发onopen事件
                console.log("open");
                // websock.send("hello-------------------"); //将消息发送到服务端
            }

            websock.onerror = function webSocketOnError(e) {
                // TODO alert
            }

            websock.onmessage = function webSocketOnMessage(e) {
                console.log(e)
                website.alert.info(e.data)
                // const data = JSON.parse(e.data)
                // TODO 更新小铃铛，alert
            }

            function getMyMessagesCount() {
                // TODO 获取消息
                website.get(ctx + 'message/client/unreadCount', null, function (data) {
                    debugger
                    if (data.code === 200) {
                        $messageSpan.text(data.data)
                    }
                });
            }
        })

    </script>
</div>
